<template>
  <span
    class="fold-wrapper iconfont"
    :class="[getIsCollapse ? 'fold-open-status' : 'fold-close-status']"
    @click="toggleFold"
    >&#xe6fd;</span
  >
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { LayoutStoreModule } from "@/store/modules/LayoutStore";

@Component({
  name: "LyHumburger",
  components: {},
})
export default class LyHumburger extends Vue {
  //#region vue prop =================================

  //#endregion

  //#region vue data =================================

  //#endregion
  //#region computed getter =================================

  //#endregion
  //#region vue life =================================
  created() {
    console.log("LyHumburager " + "created");
  }

  mounted() {
    console.log("LyHumburager " + "mounted");
  }

  beforeDestroy() {
    console.log("LyHumburager " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================
  private get getIsCollapse(): boolean {
    return LayoutStoreModule.isCollapse;
  }
  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================
  private toggleFold() {
    LayoutStoreModule.toggleCollapse(!this.getIsCollapse);
  }
  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
@import "src/assets/styles/variables.scss";
.fold-open-status {
  transform: rotate(180deg);
}
.fold-close-status {
  transform: rotate(0);
}
.fold-wrapper {
  box-sizing: border-box;
  display: inline-block;
  line-height: $logoHeight;
  text-align: center;
  padding: 0 15px;
  height: 100%;
  font-size: 20px;
  transition: transform $transitionTime;
}
</style>
